<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <div th:replace="header::common"></div>
  <style>
    .center {
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 3px;
    }
    .pagination {
      display: inline-block;
      padding-left: 0px;
      margin: 0px 0px;
      border-radius: 4px;
    }
    .table {
      width: 100%;
      max-width: 100%;
      margin-bottom: 10px;
      margin-top: 3px;
    }
  </style>
</head>
<body class="center">
<a class="btn btn-sm btn-primary" href="/insureType/toAdd">添加</a>
<a class="btn btn-sm btn-danger" onclick="deleteAll()">批量删除</a>
<table class="table table-striped table-bordered table-hover table-condensed">
  <tr class="success">
    <td><input type="checkbox" id="checkAll"/></td>
    <td>ID</td>
    <td>保险分类名</td>
    <td>操作</td>
  </tr>
  <tr th:each="insureType:${pageInfo.list}">
    <td><input type="checkbox" th:value="${insureType.id}" class="cb"/></td>
    <td th:text="${insureType.id}"></td>
    <td th:text="${insureType.name}"></td>
    <td>
      <a class="btn btn-xs btn-danger" th:onclick="|deleteById(${insureType.id})|">删除</a>
      <a class="btn btn-xs btn-primary" th:href="|/insureType/toUpdate?id=${insureType.id}|">编辑</a>
    </td>
  </tr>
</table> 
<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    <!--上一页-->
    <th:block th:if="${pageInfo.pageNo==1}">
      <li class="disabled">
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">上一页</span>
        </a>
      </li>
    </th:block>
    <th:block th:if="${pageInfo.pageNo!=1}">
      <li>
        <a th:href="|/insureType/selectByPage?pageNo=${pageInfo.pageNo-1}|" aria-label="Previous">
          <!--<span aria-hidden="true">&laquo;</span>-->
          <span aria-hidden="true">上一页</span>
        </a>
      </li>
    </th:block>

    <li th:if="${pageInfo.totalPage>=1}" th:class="${pageInfo.pageNo==page}?active:''" th:each="page:${#numbers.sequence(1, pageInfo.totalPage)}">
      <!--<a th:href="|${pageInfo.pageNo==page?'#':'/insureType/selectByPage?pageNo=${page}'}|" th:text="${page}"></a>-->
      <th:block th:if="${pageInfo.pageNo==page}">
        <a href="#" th:text="${page}"></a>
      </th:block>
      <th:block th:if="${pageInfo.pageNo!=page}">
        <a th:href="|/insureType/selectByPage?pageNo=${page}|" th:text="${page}"></a>
      </th:block>
    </li>

    <!--下一页-->
    <th:block th:if="${pageInfo.pageNo==pageInfo.totalPage}">
      <li class="disabled">
        <a href="#" aria-label="Next">
          <span aria-hidden="true">下一页</span>
        </a>
      </li>
    </th:block>
    <th:block th:if="${pageInfo.pageNo!=pageInfo.totalPage}">
      <li>
        <a th:href="|/insureType/selectByPage?pageNo=${pageInfo.pageNo+1}|" aria-label="Next">
          <!-- <span aria-hidden="true">&raquo;</span>-->
          <span aria-hidden="true">下一页</span>
        </a>
      </li>
    </th:block>
  </ul>
</nav>

<script>
  $(function (){//页面加载完了之后执行function里面代码
    $('#checkAll').click(function (){
      $('.cb').prop('checked', this.checked);
    });
  });

  function showInsureTypeContent(content) {
    layer.open({
      type: 1,
      area: ['1000px', '450px'],
      content: content
    })
  }

  function deleteAll() {
    layer.confirm('您确认要删除么?', function() {
      let array = new Array();
      //$('.cb:checked')找到加了class="cb"而且是勾选状态的
      $('.cb:checked').each(function() {
        //遍历每个勾选的checkbox，拿到里面的value值，放到array数组里面
        array.push($(this).val());
      })
      console.log(array);
      if (array.length == 0) {
        mylayer.errorMsg('至少要选择一个');
        return;
      }
      location.href = '/insureType/deleteAll?ids=' + array;
    });
  }

  function deleteById(id) {
    layer.confirm('您确认要删除么?', function() {
      location.href = '/insureType/deleteById?id=' + id;
    });

    //在js里面单引号和双引号没有区别
    /*let isDelete = window.confirm('您确认要删除么?');
    if (isDelete) {
        location.href = '/insureType/deleteById?id=' + id;
    }*/
  }
</script>
</body>
</html>